import React, {Component} from 'react'
import Dimensions from 'react-dimensions'
import {fetchData} from '../../../components/AjaxConsumer'
import {
    Form,
    Input,
    Tooltip,
    Icon,
    Cascader,
    Select,
    Row,
    Col,
    Checkbox,
    Button,
    message,
    Modal,
    Radio
} from 'antd';
const RadioGroup = Radio.Group;
const FormItem = Form.Item;
const Option = Select.Option;
const confirm = Modal.confirm;

class UserDataauthTypeFrom extends React.Component {
    state = {
        loading: false,
        edit:false,
        submitUrl:'',
        userSqlDisable:true,
        isComplexList:[
            {selectValue:'1',SelectName:'是'},
            {selectValue:'0',SelectName:'否'}
        ],
        formData:{
            dataauthTypeId:'',
            normalUserBuzType:'',
            normalUserBuzTypeName:'',
            tableName:'',
            columnCode:'',
            columnName:'',
            whereClause:'',
            isComplex:'',
            userSql:''
        }
    };

    isComplexChange = (value) =>{
        this.props.form.resetFields();
        if(value=='0'){
            this.setState({
                userSqlDisable:true
            })
        }
        if(value=='1'){
            this.setState({
                userSqlDisable:false
            })
        }
    }

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, fieldsValue) => {
                if (!err) {
                    this.setState({loading: true});
                    let values = {
                        ...fieldsValue,
                    };
                    console.log('表单提交数据-----------',values);
                    //发送ajax 控制请求数据规则，无值的设为空
                    for (let item in values) {
                        if (!values[item]) {
                            values[item] = ''
                        }
                    }
                    const options = {
                        url: this.state.submitUrl,
                        type: 'post',
                        condition: values
                    };
                    fetchData(
                        this, 
                        options, 
                        (res) => {
                            //成功的回调函数
                            this.setState({
                                loading:false
                            });
                            message.success('操作成功');
                            
                            this.handleCancel();
                            this.props.refreshHandle(); 
                        },
                        (res) =>{
                            //错误的回调函数
                            this.setState({
                                loading:false
                            });
                        }
                    )
                }
            });
    }

    handleCancel = () => {
        this.props.onCancel();//123
        this.props.form.resetFields(); //初始化表单
        //初始化ajax加载过来的selectList
    }

    // 修改属性后刷新-n次
    componentWillReceiveProps(nextProps){

        console.log('componentWillReceiveProps------',nextProps);

        let tmpFormData = nextProps.formData;
        let url = nextProps.submitUrl;
        if(url=='/base/auth/data/type/c'){
            this.setState({
                edit:false
            });
        }
        if(url=='/base/auth/data/type/u'){
            this.setState({
                edit:true
            });
        }
        this.setState({
            formData:tmpFormData,
            submitUrl:nextProps.submitUrl
        });
    }
    // 组件参数实例化-仅一次
    componentWillMount(){
        console.log('componentWillMount-----',this.props);
        this.setState({
            submitUrl:this.props.submitUrl,
            formData:this.props.formData
        });
    }
    //初始化页面刷新-仅一次
    componentDidMount(){
   
    }


    render() {
        const {getFieldDecorator} = this.props.form;
        const formItemLayout = {
            labelCol: {
                xs: {span: 24},
                sm: {span: 6}
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 14}
            }
        };
        const tailFormItemLayout = {
            wrapperCol: {
                xs: {span: 24,offset: 0},
                sm: {span: 24,offset: 10}
            }
        };
        //一行几个 （总宽度24,）
        const colNumber = 12;//一行2个
        return (
            <div>
                <Form
                    onSubmit={this.handleSubmit}
                    style={{
                    backgroundColor: '#fff',
                    paddingTop: '20px',
                    paddingBottom: '20px'
                }}>
                    <Row>
                        <Col span={0}>
                                <FormItem>
                                    {getFieldDecorator('dataauthTypeId',{
                                        initialValue: this.state.formData.dataauthTypeId,
                                        rules: [
                                            {}
                                        ]
                                    })(<Input type="hidden"/>)}
                                </FormItem>
                        </Col>
                        <Col span={colNumber}>
                            <FormItem {...formItemLayout} label="数据权限类型" hasFeedback>
                                {getFieldDecorator('normalUserBuzType', {
                                    initialValue:this.state.formData.normalUserBuzType,
                                    rules: [
                                        {
                                            required: true, message: '请输入数据权限类型!'
                                        }
                                    ]
                                })(<Input disabled={this.state.edit}/>)}
                            </FormItem>
                        </Col>
                        <Col span={colNumber}>
                            <FormItem {...formItemLayout} label="数据权限名称" hasFeedback>
                                {getFieldDecorator('normalUserBuzTypeName', {
                                    initialValue:this.state.formData.normalUserBuzTypeName,
                                    rules: [
                                        {}
                                    ]
                                })(<Input />)}
                            </FormItem>
                        </Col>
                        <Col span={colNumber}>
                            <FormItem {...formItemLayout} label="表名" hasFeedback>
                                    {getFieldDecorator('tableName', {
                                        initialValue:this.state.formData.tableName,
                                        rules: [
                                            {
                                                required: this.state.userSqlDisable, message: '请填写表名!'
                                            }
                                        ]
                                    })(
                                        <Input/>
                                    )}
                            </FormItem>
                        </Col>
                        <Col span={colNumber}>
                            <FormItem {...formItemLayout} label="code列名" hasFeedback>
                                    {getFieldDecorator('columnCode', {
                                        initialValue:this.state.formData.columnCode,
                                        rules: [
                                            {
                                                required: this.state.userSqlDisable, message: '请填写code列名!'
                                            }
                                        ]
                                    })(
                                        <Input/>
                                    )}                         
                            </FormItem>
                        </Col>
                        <Col span={colNumber}>
                            <FormItem {...formItemLayout} label="name列名" hasFeedback>
                                    {getFieldDecorator('columnName', {
                                        initialValue:this.state.formData.columnName,
                                        rules: [
                                            {
                                                required: this.state.userSqlDisable, message: '请填写name列名!'
                                            }
                                        ]
                                    })(
                                        <Input/>
                                    )}                         
                            </FormItem>
                        </Col>
                        <Col span={colNumber}>
                            <FormItem
                                {...formItemLayout}
                                label="复杂SQL"
                            >
                                <Row gutter={8}>
                                    {getFieldDecorator('isComplex', {
                                        initialValue:this.state.formData.isComplex,
                                        rules: [{
                                                 required: true, message: '请选择SQL类型!'
                                            }],
                                    })(
                                        <Select 
                                            placeholder="请选择"
                                            showSearch 
                                            allowClear
                                            onChange={this.isComplexChange}
                                        >
                                            {
                                                this.state.isComplexList.map((es,sIndex)=>{
                                                    return (
                                                        <Option key={sIndex} value={es.selectValue}>{es.SelectName}</Option>
                                                    )
                                                })
                                            }
                                        </Select>
                                    )}
                                </Row>
                            </FormItem>
                        </Col>
                        <Col span={colNumber} style={{height:'auto'}}>
                            <FormItem {...formItemLayout} label="筛选条件" hasFeedback>
                                    {getFieldDecorator('whereClause', {
                                        initialValue:this.state.formData.whereClause,
                                        rules: [
                                            {
                                                //required: true, message: '请选择产品编码'
                                            }
                                        ]
                                    })(
                                        <Input type="textarea" rows={4}/>
                                    )}                         
                            </FormItem>
                        </Col>
                        <Col span={colNumber} style={{height:'auto'}}>
                            <FormItem {...formItemLayout} label="自定义sql" hasFeedback>
                                    {getFieldDecorator('userSql', {
                                        initialValue:this.state.formData.userSql,
                                        rules: [
                                            {
                                                required: !this.state.userSqlDisable, message: '请填写自定义sql'
                                            }
                                        ] 
                                    })(
                                        <Input type="textarea" rows={4} disabled={this.state.userSqlDisable}/>
                                    )}                         
                            </FormItem>
                        </Col>
                      
                        <Col span={24}>
                            <FormItem {...tailFormItemLayout}>
                                <Button type="primary" htmlType="submit" size="large">{this.state.loading?'提交中...':'确定'}</Button>
                                <Button
                                    type="default"
                                    style={{marginLeft: '50px'}}
                                    size="large"
                                    onClick={this.handleCancel}
                                >
                                    取消
                                </Button>
                            </FormItem>
                        </Col>

                    </Row>
                </Form>
                
            </div>
        );
    }
}

export default Form.create()(UserDataauthTypeFrom);
